<template>
  <view class="login-contaioner">
    <!-- 提示登录的图标 -->
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    <button type="primary" class="btn-login" @click="userLogin">
      一键登录
    </button>
    <text>登录后尽享更多权益</text>
  </view>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  data() {
    return {};
  },
  methods: {
    // 用户登录的方法
    userLogin() {
      uni.getUserProfile({
        desc: '获取商城用户的信息',
        success: res => {
          console.log(res, 'res');
          // 把用户的信息储存到vuex，新版API这几个必要参数都没全部装在userInfo这个对象，需要装在一个对象里。
          let User = {
            userInfo: res.userInfo,
            encryptedData: res.encryptedData,
            iv: res.iv,
            rawData: res.rawData,
            signature: res.signature
          };
          this.updateUserInfo(res.userInfo);
          this.getToken(User);
          // 因为后台接口限制，只能把token写死，这个token可以成功创建订单
          this.updateToken(
            'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo'
          );
          this.navigetBack();
        },
        fail: error => {
          console.log(error);
        }
      });
    },
    getToken(User) {
      // 获取用户的code
      uni.login({
        onlyAuthorize: true,
        success: function(loginRes) {
          console.log(loginRes.code);
          // 准备参数对象
          // let query = {
          //   code: loginRes.code,
          //   encryptedData: User.encryptedData,
          //   iv: User.iv,
          //   rawData: User.rawData,
          //   signature: User.signature
          // };
          uni.request({
            url: 'https://api-ugo-web.itheima.net/api/public/v1/users/wxlogin',
            method: 'POST',
            data: {
              code: loginRes.code,
              encryptedData: User.encryptedData,
              iv: User.iv,
              rawData: User.rawData,
              signature: User.signature
            },
            success: res => {
              console.log(res, '获取用户token成功,然并卵');
            },
            fail: error => {
              console.log(error, '获取用户code失败');
            }
          });
        },
        fail: err => {
          return uni.$showMsg('登陆失败,请稍候重试');
        }
      });

      // const result = await uni.$http.post(
      //   '/api/public/v1/users/wxlogin',
      //   query
      // );
      // console.log(result);
    },
    //
    navigetBack() {
      if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
        uni.switchTab({
          url: this.redirectInfo.from,
          complete: () => {
            this.updateRedirectInfo(null);
          }
        });
      }
    },
    ...mapMutations('userInfo', [
      'updateUserInfo',
      'updateToken',
      'updateRedirectInfo'
    ])
  },
  computed: {
    ...mapState({
      redirectInfo: state => state.userInfo.redirectInfo
    })
  }
};
</script>
res

<style lang="scss">
.login-contaioner {
  height: 700rpx;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  // 底部椭圆效果
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 40px;
    background-color: #f5f5f5;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 100%;
    transform: translateY(50%);
  }
  .btn-login {
    width: 90%;
    border-radius: 25px;
    background: #c00000;
    margin: 15px 0;
  }
  text {
    font-size: 12px;
    color: gray;
  }
}
</style>
